<template>
	<el-main>
		<el-card shadow="never" header="基础示例">
			<sc-upload v-model="imgurl"></sc-upload>
			<sc-upload
				v-model="imgurl2"
				title="自定义标题"
				icon="el-icon-picture-outline"
			></sc-upload>
			<sc-upload
				v-model="imgurl3"
				:apiObj="uploadApi"
				accept=".xls,.xlsx"
				:on-success="success"
				:width="220"
			>
				<div class="custom-empty">
					<i class="el-icon-upload"></i>
					<p>自定义插槽</p>
				</div>
			</sc-upload>
			<sc-upload
				v-model="imgurl4"
				title="开启剪裁"
				:cropper="true"
				:compress="1"
				:aspectRatio="1 / 1"
			></sc-upload>
		</el-card>

		<el-card shadow="never" header="在验证表单中使用">
			<el-form
				ref="ruleForm"
				:model="form"
				:rules="rules"
				label-width="100px"
			>
				<el-form-item label="身份证" class="imglist" required>
					<el-col>
						<el-form-item prop="img1">
							<sc-upload
								v-model="form.img1"
								title="人像面"
							></sc-upload>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item prop="img2">
							<sc-upload
								v-model="form.img2"
								title="国徽面"
							></sc-upload>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item label="其他凭证" prop="img3">
					<sc-upload-multiple
						v-model="form.img3"
					></sc-upload-multiple>
				</el-form-item>
				<el-form-item label="日期" prop="date">
					<el-date-picker
						type="date"
						placeholder="选择日期"
						v-model="form.date"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm"
						>保存</el-button
					>
					<el-button @click="resetForm">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</el-main>
</template>

<script>
export default {
	name: "upload",
	data() {
		return {
			uploadApi: this.$API.common.upload,
			imgurl: "img/avatar.jpg",
			imgurl2: "",
			imgurl3: "",
			imgurl4: "",
			form: {
				img1: "",
				img2: "",
				img3: "",
				date: "",
			},
			rules: {
				img1: [
					{ required: true, message: "请上传", trigger: "change" },
				],
				img2: [
					{ required: true, message: "请上传", trigger: "change" },
				],
				img3: [
					{ required: true, message: "请上传", trigger: "change" },
				],
				date: [
					{
						required: true,
						message: "请选择日期",
						trigger: "change",
					},
				],
			},
		};
	},
	methods: {
		success(response) {
			this.$alert(
				`success函数钩子，return false后阻止后续执行，回调参数打开控制台查看`,
				{
					title: "提示",
					type: "success",
				}
			);
			console.log(response);
			return false;
		},
		submitForm() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					alert("请看控制台输出");
					console.log(this.form);
				} else {
					return false;
				}
			});
		},
		resetForm() {
			this.$refs.ruleForm.resetFields();
		},
	},
};
</script>

<style scoped>
.el-card + .el-card {
	margin-top: 15px;
}

.imglist {
	margin-bottom: 0;
}
.imglist .el-col + .el-col {
	margin-left: 10px;
}
.custom-empty {
	width: 100%;
	height: 100%;
	line-height: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.custom-empty i {
	font-size: 40px;
	color: #8c939d;
}
.custom-empty p {
	font-size: 12px;
	font-weight: normal;
	color: #8c939d;
	margin-top: 10px;
}
</style>
